<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hide {
            display: none;
        }
        .active {

        }
    </style>
</head>
<body>
    <input id="inp" type="text">
    <button id="add">新增</button>
    <button id="search">搜索</button>
    <ul id="list">
        <!-- to do -->
    </ul>

    <script>

        const inp = document.querySelector('#inp');
        const addBtn = document.querySelector('#add');
        const searchBtn = document.querySelector('#search');
        const ul = document.querySelector('#list');

        // 新增
        function onCreate () {
            // 创建li
            const listItem = document.createElement('li');
            // 创建内容
            const span = document.createElement('span');
            span.innerText = inp.value;
            // 创建修改按钮
            const editBtn = document.createElement('button');
            editBtn.innerText = '修改';
            editBtn.addEventListener('click', onEdit);
            // 创建删除按钮
            const delBtn = document.createElement('button');
            delBtn.innerText = '删除';
            delBtn.addEventListener('click', onDelete);
            // 把新建的元素都追加到li中
            listItem.appendChild(span);
            listItem.appendChild(delBtn);
            listItem.appendChild(editBtn);
            // 把li追加到ul中
            ul.appendChild(listItem);
            // 清空input
            inp.value = '';
            inp.focus();
        }

        // 删除
        function onDelete () {
            ul.removeChild(this.parentNode);
        }

        // 搜索
        function onSearch () {
            const spans = document.querySelectorAll('li span');
            for (const span of spans) {
                if (!span.innerText.includes(inp.value)) {
                    span.parentNode.setAttribute('class', 'hide');
                } else {
                    span.parentNode.setAttribute('class', '');
                }
            }
        }

        // 修改
        function onEdit () {
            console.log(this); // 修改按钮
            const li = this.parentNode;
            // li.setAttribute('class', 'active');
            // 创建确认按钮
            const okBtn = document.createElement('button');
            okBtn.innerText = '确认';
            okBtn.addEventListener('click', onEditOk);
            // 创建输入框
            const editInp = document.createElement('input');
            const span = li.querySelector('span');
            editInp.value = span.innerText;

            li.appendChild(okBtn);
            li.insertBefore(editInp, span);
            li.removeChild(span);
            li.removeChild(this);
        }

        // 修改确认
        function onEditOk () {
            console.log(this); // 修改确认按钮
            const li = this.parentNode;
            // 创建修改按钮
            const editBtn = document.createElement('button');
            editBtn.innerText = '修改';
            editBtn.addEventListener('click', onEdit);
            // 创建span
            const span = document.createElement('span');
            const editInp = li.querySelector('input');
            span.innerText = editInp.value;

            li.appendChild(editBtn);
            li.insertBefore(span, editInp);
            li.removeChild(editInp);
            li.removeChild(this);
        }

        addBtn.addEventListener('click', onCreate);
        searchBtn.addEventListener('click', onSearch);

        

    </script>
</body>
</html>